<template>
  <el-table :data="filterTableData" style="width: 100%" height="450px">
    <el-table-column label="操作" width="100px">
      <template #default="scope">
        <el-button type="danger" @click="delect(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
    <el-table-column label="邮箱地址" prop="mail" width="200px"/>
    <el-table-column label="名字" prop="username" width="100px"/>
    <el-table-column label="密码" prop="userpwd" width="150"/>
    <el-table-column label="性别">
      <template #default="data">
        <span>{{ data.row.sex == 0 ? '男' : '女' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="身份证号" prop="idcard" width="200px"/>
    <el-table-column label="所属班级" prop="grade"/>
    <el-table-column label="权限等级">
      <template #default="data">
        <span>{{ LevelJudge(data.row.level) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" prop="data" width="100px">
      <template #default="data">
        <span>{{ DateJudge(data.row.data) }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {ElMessageBox} from "element-plus";
import {LevelJudge} from "@/components/function/LevelJudge";
import {delectmail} from "@/components/request/delectmail";
import {UserList} from "@/components/request/UserList";
import {DateJudge} from "@/components/function/DateJudge"

export default {
  name: "selectuserlist",
  data() {
    return {
      filterTableData: null,
    }
  },
  mounted() {
    this.demo();
  },
  methods: {
    LevelJudge,
    DateJudge,
    // 优先执行
    demo() {
      UserList(date => {
        this.filterTableData = date;
      })
    },
    // 删除
    delect(scope, row) {
      ElMessageBox.confirm(
          '你确定要删除' + row.mail,
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        delectmail(row.mail);
        ElMessageBox.alert('删除成功', 'Title', {
          confirmButtonText: 'OK',
          callback: () => {
            this.demo();
          }
        })
      }).catch(() => {
        return null;
      })
    }
  }
}
</script>

<style scoped>

</style>